/**
 * 备忘消息的CSS样式
 * @author xupingmao
 * @since 2019/11/24
 * @modified 2022/04/16 10:35:15
*/


/** 消息 **/
.message-row {
    float: left;
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

.msg-item-header {
    float: left;
    width: 100%;
}

.msg-left-op-link, .msg-right-op-link {
    font-size: 12px;
    color: #000;
    border: 1px solid #ccc;
    padding: 2px;
    background-color: #eee;
    border-radius: 2px;
}

.msg-item-ip {
    color: #888;
}

.msg-left-op-link:hover, .msg-right-op-link:hover {
    background-color: #ccc;
    border: 1px solid #000;
}

.msg-left-op-link {
    margin-right: 20px;
}

.msg-right-op-link {
    margin-left: 12px;
    float: right;
}

.red {
    color: red;
}

.chat-avatar {
    color: #2092d9;
}

.finished {
    color: #fff;
    background-color: green;
}
.in-progress {
    background-color: #f90;
    color: white;
}

.suspended {
    background-color: #aaa;
    color: white;
}

.chat-msg {
    margin-top: 0.1rem;
    float: left;
}

.msg-item-content {
    float: left;
    width: 100%;
    border-width: 5px;
    border-radius: 5px;
    word-wrap: break-word;
    word-break: break-all;
    padding: 5px 0px;
}

.msg-item-option {
    padding-top: 10px;
    float: left;
    width: 100%;
}

.chat-msg-img {
    width: 180px;
}
.chat-msg-option {
    color: #888;
    margin: 0;
    font-size: 10px;
}

.chat-msg-time {
    display: inline-block;
    padding: 2px;
    color: #888;
}

.input-box {
    width: 100%;
    font-size: 14px;
    outline: none;
}

.send-button {
    float: left;
    width: 64px;
    margin-top: 5px;
    margin-right: 5px;
}

.right {
    float: right;
}

.msg-tag,.msg-tag-orange {
    padding:3px;
    border-radius: 3px;
    color: white;
    background-color: #ccc;
}

.msg-tag-orange {
    padding: 3px;
    border-radius: 3px;
    color: white;
    background-color: orange;
}


.msg-img-box {
    width: 200px;
    background: #eee;
    overflow: hidden;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 需要配合子容器的vertical-align:middle; */
    /*height: 200px;*/
    /*line-height: 200px;*/
}

.msg-img-box.multi {
    float: left;
    background: none;
    width: unset;
    height: 200px;
    padding-right: 10px;
    padding-top: 10px;
}

.msg-img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}


.msg-update-btn {
    width: 60px;
}


.msg-amount-text {
    display: inline-block;
    padding: 3px 8px;
    color: #666;
}

.msg-strong {
    color: red;
    font-weight: bold;
}


/* 侧边栏的tab样式 */
.sidebar-btn-style>.x-tab-item {
    width: 50%;
    float: left;
    padding: 5px;
}

.sidebar-btn-style .x-tab {
    width: 100%;
    color: black;
    background-color: #eee;
    border-radius: 3px;
    margin: 0px;
}

.sidebar-btn-style .x-tab.active {
    background-color: gray;
    color: #fff;
    border: 1px solid gray;
}

.sidebar-btn-style .secondary.active {
    color: #fff;
}

.secondary {
    color: #888;
}


/* 列表样式 */
.sidebar-list-style>.x-tab-item {
    width: 100%;
    float: left;
    padding: 5px;
    color: #08c;
    border-bottom: 1px solid #eee;
}

.sidebar-list-style>.x-tab-item:hover {
    background-color: #eee;
}

.sidebar-list-style>.x-tab-item:last-child {
    border-bottom: none;
}


.sidebar-list-style .x-tab {
    width: 100%;
    padding: 0px;
    color: #08c;
}

.sidebar-list-style .x-tab.active {
    color: red;
}

.sidebar-list-style>.x-tab:last-child {
    border-bottom: none;
}

.edit-box {
    font-family: "微软雅黑", "Open Sans Light", Helvetica, "Arial Narrow", HELVETICA;
    font-size: 14px; 
}


.layui-layer-content .msg-edit-box {
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    width: unset;
    height: unset;
    margin-bottom: 0px;
}

.layui-layer-content .msg-edit-box textarea {
    position: absolute;
    bottom: 40px;
    top: 0px;
    left: 0px;
    right: 0px;
}

.layui-layer-content .msg-edit-btn-box {
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
}

.msg-dialog-bottom-bar {
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    padding: 10px;
    padding-top: 5px;
    border-top: 1px solid #ccc;
    background-color: #fff;
}

.message-left {
    float: left;
    width: 30%;
    padding-right: 10px;
    min-height: 100px;
}

.message-right {
    float: left;
    width: 70%;
}

.message-tag-card {
    min-height: 500px;
}

/** 移动端样式放在最后 **/
@media screen and (max-width: 500px) {
    /** mobile **/
    .message-left {
        display: none;
    }
    .message-right {
        width: 100%;
    }
}
